<template>
  <header class="header">
    <el-row
      type="flex"
      justify="space-between"
      class="main"
    >

      <!-- logo -->
      <div class="logo">
        <nuxt-link to="/">
          <img
            src="http://157.122.54.189:9093/images/logo.jpg"
            alt=""
          >
        </nuxt-link>
      </div>

      <!-- 菜单栏 -->
      <el-row
        type="flex"
        class="navs"
      >
        <nuxt-link to="/">首页</nuxt-link>
        <nuxt-link to="/post">旅游攻略</nuxt-link>
        <nuxt-link to="/hotel">酒店</nuxt-link>
        <nuxt-link to="/air">国内机票</nuxt-link>
      </el-row>

      <!-- 登录/用户信息 -->
      <el-row
        type="flex"
        align="middle"
      >

        <!-- 如果用户存在则展示用户信息，用户数据来自store -->
        <el-dropdown v-if="$store.state.user.user">
          <el-row
            type="flex"
            align="middle"
            class="el-dropdown-link"
          >
            <nuxt-link to="#">
              <img :src="$axios.defaults.baseURL + $store.state.user.user.defaultAvatar" />
              {{$store.state.user.user.nickname}}
            </nuxt-link>
            <i class="el-icon-caret-bottom el-icon--right"></i>
          </el-row>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>
              <nuxt-link to="#">个人中心</nuxt-link>
            </el-dropdown-item>
            <el-dropdown-item>
              <div @click="handleLogout">退出</div>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

        <!-- 不存在用户信息展示登录注册链接 -->
        <nuxt-link
          to="/user/login"
          class="account-link"
          v-else
        >
          登录 / 注册
        </nuxt-link>
      </el-row>
    </el-row>
  </header>
</template>
<script>
export default {
  methods: {
    // 用户退出
    handleLogout() {
      // 执行退出
      this.$store.commit("user/loginOut");
      // 跳转页面
      this.$router.push("/user/login");
    }
  }
};
</script>
<style scoped lang="less">
.header {
  height: 60px;
  line-height: 60px;
  background: #fff;
  border-bottom: 1px #ddd solid;
  box-shadow: 0 3px 0 #f5f5f5;
  box-sizing: border-box;

  .main {
    width: 1000px;
    margin: 0 auto;
  }

  .logo {
    width: 156px;
    padding-top: 8px;

    img {
      display: block;
      width: 100%;
    }
  }

  .navs {
    margin: 0 20px;
    flex: 1;

    a {
      display: block;
      padding: 0 20px;
      height: 60px;
      box-sizing: border-box;

      &:hover,
      &:focus,
      &:active {
        border-bottom: 5px #409eff solid;
        color: #409eff;
      }
    }

    /* 
  1 当 url  hotel 的时候  a标签上   nuxt-link-exact-active
  2 当 url  hotel?city=珠海  时候   
    1 没有了 nuxt-link-exact-active
    2 但是有 nuxt-link-active
    3 对于首页来说 要的是
      /  
      /post
      /air
      /hotel
      /user 

      精确匹配 还是 模糊匹配


  1 当 url 等于 "/"  首页被选中 当url 等于 "/..."  首页不要被选中 
  2 当 url 等于 "/hotel"  "/hotel?city=广州"
    酒店被选中
  3 样式能力 (看着简单 其实是有点难度!!)
   */

    /* nuxt-link-active 代表着模糊匹配  不包含首页   */
    /deep/ .nuxt-link-active:not(:first-child) {
      background: #409eff;
      color: #fff !important;
    }

    /* 只实现了 首页的 精确匹配 */ /* "/" */
    /deep/ .nuxt-link-exact-active:first-child {
      background: #409eff;
      color: #fff !important;
    }
  }

  .message {
    height: 36px;
    line-height: 1;
    cursor: pointer;
    .el-icon-bell {
      margin-right: 2px;
      font-size: 18px;
    }
  }

  .el-dropdown-link {
    margin-left: 20px;

    &:hover {
      img {
        border-color: #409eff;
      }
    }

    a {
      display: block;
    }

    img {
      width: 32px;
      height: 32px;
      vertical-align: middle;
      border: 2px #fff solid;
      border-radius: 50px;
    }
  }

  .account-link {
    font-size: 14px;
    margin-left: 10px;
    color: #666;

    &:hover {
      color: #409eff;
      text-decoration: underline;
    }
  }
}
</style>